<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>富豪榜</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <!-- 导航栏 -->
    <nav>
      <ul>
        <li>主页</li>
        <li>排行榜</li>
        <li>联系方式</li>
      </ul>
    </nav>
    <!-- 头部内容 -->

    <header>
      <!-- 导航栏的按钮 -->
      <button id="toggle">导航栏</button>
      <!-- 标题 -->
      <h2>欢迎来到富豪排行榜</h2>
      <!-- 欢迎语句 -->
      <p>weclome to the rich rank</p>
      <!-- 登陆按钮 -->
      <button id="login">登陆</button>
    </header>
    <!-- 主题内容 -->
    <div class="container">
      <!-- 左盒子 -->
      <aside>
        <!-- 五个按钮 -->
        <button id="add-user">添加账户</button>
        <button id="double">资金翻倍</button>
        <button id="show-millionaire">查询百万富翁</button>
        <button id="sort">财富榜</button>
        <button id="calculate">计算总额</button>
      </aside>
      <!-- 右盒子 -->
      <main id="main">
        <h2>
          <strong>Person</strong>
          <span>Wealth</span>
        </h2>
      </main>
    </div>

    <script>
      let dataInfo = [
        { name: "English chan", money: 392001 },
        { name: "alex chan", money: 568932 },
        { name: "melon chan", money: 698756 },
        { name: "Clare Langner", money: 292489 },
        { name: "Abigail Rice", money: 953957 },
        { name: "Clarice Dias", money: 168472 },
        { name: "Vernon Lucas", money: 718225 },
        { name: "Nina Schmidt", money: 889147 },
      ];
      //获取加倍按钮
      let double_btn = document.querySelector("#double");
      //查询
      let query_btn = document.querySelector("#show-millionaire");
      //排序
      let most_btn = document.querySelector("#sort");
      //总额
      let total_btn = document.querySelector("#calculate");
      //获取右边盒子
      let main = document.querySelector("#main");
      //声明一个空数组 用于存放数据
      let arr = [];
      //下标 ，获取原来数组的元素
      let num = -1;
      //获取添加按钮
      let add_btn = document.querySelector("#add-user");
      add_btn.addEventListener("click", addfn);
      function addfn() {
        //1. 分析问题的时候一定要想办法把功能/需求 转化为编程语言
        //转换为编程语言的核心 -> 以对象的眼光来看待问题
        //点击一次，渲染数组中的一个对象 页面上 ，再点一次 前一次数据是否保留？
        //要保留数据？ 多个数据？ 多个数据的存放用数组
        // 关键key: 点击一次push到新数组
        //遍历新数组 渲染
        num++;
        arr.push(dataInfo[num]);
        updataDom(arr);
      }
      //翻倍功能
      double_btn.addEventListener("click", doublefn);
      function doublefn() {
        //我们要翻倍的是新数组中每个元素的 money属性
        //方法一 foreach遍历
        arr.forEach(function (ele) {
          ele.money *= 2;
        });
        updataDom(arr);

        // //方法二，map+...扩展运算符
        // arr = arr.map(function (ele) {
        //   return { ...ele, money: ele.money * 2 };
        // });
        // updataDom(arr);
      }
      //查询100w
      query_btn.addEventListener("click", query_fn);
      //排序
      function query_fn() {
        arr = arr.filter(function (ele) {
          return ele.money >= 1000000;
        });
        updataDom(arr);
      }
      most_btn.addEventListener("click", mostfn);
      function mostfn() {
        arr = arr.sort(function (a, b) {
          return a.money - b.money;
        });
        updataDom(arr);
      }
      //总额
      total_btn.addEventListener("click", totalfn);
      function totalfn() {
        //计算总金额
        let acc = arr.reduce(function (sum, ele) {
          return (sum += ele.money);
        }, 0); //初始化为0
        let div = document.createElement("div");
        console.log(acc);
        div.innerHTML = `<h2><strong>Total sum:</strong>${formatMoney(
          acc
        )}</h2>`;
        main.appendChild(div);
      }
      //渲染dom的函数
      function updataDom(arr) {
        main.innerHTML = `
        <h2>
          <strong>Person</strong>
          <span>Wealth</span>
        </h2>
        `;
        //清除main下面的其他数据内容
        //渲染新的数据上去
        arr.forEach(function (ele) {
          //每个ele都是一个账户，而且独占一行
          let div = document.createElement("div");
          div.classList.add("person");
          div.innerHTML = `
              <strong>${ele.name}</strong>
              ${formatMoney(ele.money)}
          `;
          main.appendChild(div);
        });
      }
      //处理金额
      function formatMoney(money) {
        // 123456->$123,456
        // 方法1.通过数字的方法去实现
        // let res = money.toLocaleString();
        // console.log(res);
        // return "$" + res + ".00";

        //方法2. 123456 =>数组的[1,2,3,4,5,6]
        //每次循环到三的时候 就在前面插入一个,(逗号)
        // let res;
        // let arr = money.toString().split("");
        // let count = 0; //记录次数
        // let newArr = [];
        // for (let i = arr.length - 1; i >= 0; i--) {
        //   //每次循环到三的时候 就在前面插入一个,(逗号)
        //   newArr.unshift(arr[i]);
        //   count++;
        //   if (count % 3 == 0 && i != 0) {
        //     newArr.unshift(",");
        //   }
        // }
        // // console.log(newArr);
        // return "$" + newArr.join("") + ".00";

        //方法3 正则
        return "$" + money.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
      }
      console.log(formatMoney(12345));

      // console.log(formatMoney(12345));

      //获取导航栏按钮
      let nav_btn = document.querySelector("#toggle");
      // let count = 0;
      nav_btn.addEventListener("click", function () {
        // count++;
        // if (count % 2 == 0) {
        //   document.body.classList.remove("show_nav");
        // } else {
        //   document.body.classList.add("show_nav");
        // }
        document.body.classList.toggle("show_nav");
        /*
        面试必问：涉及性能优化问题
        1. width 0->200px
        改变width/height 等 -> 改变盒子的结构 ->引起浏览器的重排(回流)（重新渲染） n个盒子重新绘制
        2. transform 或者改变盒子的颜色 ->改变了盒子的外观 ->浏览器的重新绘制(重绘) 只绘制那个改变的盒子
        */
      });
    </script>
  </body>
</html>
